<template>
  <div class="app-container">
    <!--分类详情-->
    <!-- 分类信息 -->
    <el-form ref="form" label-width="100px" class="demo-ruleForm" size="small">
      <el-card class="box-card">
        <div class="form-container">
          <el-form-item label="当前分类" prop="classify_id">
            <el-cascader
              :options="options"
              :props="props"
              v-model="classify_id"
              clearable
              style="width:50%; margin-bottom: 10px;"/>
            <el-cascader-panel
              :options="options"
              :props="props"
              v-model="classify_id"
              clearable
              style="width:50%; margin-bottom: 10px;"/>
            <el-row class="notes">没有找到想要的分类？赶快去
              <router-link :to= "{ path: '/commodity-type'}" tag="a" target="_blank" class="notes-add">管理宝贝分类</router-link>吧
              <el-button size="small" type="text" class="notes-refresh" @click="refresh">刷新</el-button>
            </el-row>
          </el-form-item>
          <el-form-item label="商品类型：" >
            <el-radio-group v-model="checkType" :disabled="isCheckType" size="medium">
              <el-radio-button label="1" >信用卡产品</el-radio-button>
              <el-radio-button label="2">积分兑换商品</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-check"
              @click="topDetails()">下一步，发布宝贝</el-button>
          </el-form-item>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import { getVarietyLists, getLatestCommodityLabel } from '@/api/mall/commodity'
export default {
  components: { },
  mixins: [],
  data() {
    return {
      checkType: '1', // 1:信用卡产品; 2:积分兑换商品
      isCheckType: false,
      state: 0, // 状态码，默认为0，从发布宝贝页面-》选择分类按钮进入为1。作用：点击发布宝贝菜单进入，或页面刷新需要从cookie取商品数据
      commodity_id: '',
      classify_id: [],
      options: [],
      typeOptions: [], // 分类层级选项
      props: {
        label: 'label', // 显示的选项
        value: 'value', // 选择的value值
        children: 'children', // 子级属性名
        checkStrictly: true // 可以选择任意一级
      } // 指定层级属性
    }
  },
  created() {
    // 获取商品分类
    getVarietyLists().then(res => {
      this.options = res.map(item => {
        return {
          value: item.variety_id,
          label: item.variety_name,
          children: item.secondVarietyList.map(item => {
            return {
              value: item.second_variety_id,
              label: item.second_variety_name
            }
          })
        }
      })
    })
    // 初始化商品类型 1:信用卡产品; 2:积分兑换商品
    const checkType = this.$route.query.checkType
    if (checkType && checkType > 0) {
      this.checkType = checkType
      this.isCheckType = true
    }
    // 初始化页面时：分类默认选中
    // 1.编辑宝贝，重新选择分类时会跳转至该页面，此时也需要把编辑的宝贝原来的值当做默认值
    const classify_id = this.$route.query.classify_id
    if (classify_id && classify_id.length > 0) {
      this.classify_id = classify_id.split(',')
      const commodity_id = this.$route.query.commodity_id
      if (commodity_id && commodity_id.length > 0) {
        this.commodity_id = commodity_id
      }
      // 状态码，为1
      const state = this.$route.query.state
      if (state && Number(state)) {
        this.state = Number(state)
      }
    } else {
      // 2.点击发布宝贝会进入该页面，此时需要知道最后一次发布宝贝是哪个分类当做默认值
      getLatestCommodityLabel().then(res => {
        // 一级分类默认选中
        if (res.variety_id && res.variety_id.length > 0 && res.variety_id !== '0') {
          // 这里不用push的原因是数据可能会渲染不上输入框，所以用直接赋值的方式进行绑定
          this.classify_id = [res.variety_id]
        }
        // 二级分类默认选中
        if (res.second_variety_id && res.second_variety_id.length > 0 && res.second_variety_id !== '0') {
          this.classify_id.push(res.second_variety_id)
        }
      })
    }
  },
  methods: {
    refresh() {
      getVarietyLists().then(res => {
        this.options = res.map(item => {
          return {
            value: item.variety_id,
            label: item.variety_name,
            children: item.secondVarietyList.map(item => {
              return {
                value: item.second_variety_id,
                label: item.second_variety_name
              }
            })
          }
        })
      })
    },

    topDetails() {
      // 跳转到商品详情页面
      if (this.classify_id.length > 0 && this.checkType === '2') {
        // classify_id:数组转字串，便于页面解析, state:状态码，1为从发布宝贝页面进入更新分类信息
        const query = { 'classify_id': this.classify_id.join(','), 'commodity_id': this.commodity_id, 'state': this.state }
        this.$router.push({ path: '/commodity/details', query: query })
      } else if (this.classify_id.length > 0 && this.checkType === '1') {
        // classify_id:数组转字串，便于页面解析, state:状态码，1为从发布宝贝页面进入更新分类信息
        const query = { 'classify_id': this.classify_id.join(','), 'commodity_id': this.commodity_id, 'state': this.state }
        this.$router.push({ path: '/commodity/addCard', query: query })
      } else {
        this.$message({
          message: '请选择分类',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style lang="scss">
.notes {
  color: #909399;
  margin: 15px 0;
  .notes-add {
    color: #409EFF;
    font-weight: 600;
  }
}
.el-cascader-menu__wrap {
  height: 350px!important;
}
.el-cascader-panel.is-bordered {
  height: 350px!important;
}
.el-cascader-menu__wrap .el-scrollbar__wrap .el-scrollbar__wrap--hidden-default {
  height: 350px!important;
}
.notes-refresh {
  margin-left: 10px;
}
</style>

